<div class="content-warp">
  <div class="content-header">
    <i class="anticon anticon-left-circle-o" (click)="goProductList()"></i>
    <span class="content-title">{{productId?'编辑商品':'新建商品'}}</span>
  </div>
  <div class="content-body">
    <nz-spin [nzSpinning]="_isSpinning">
      <form nz-form [formGroup]="validateForm" (ngSubmit)="_submitForm()">
        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">商品信息</div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品名称：</div>
            <div nz-form-control [nzValidateStatus]="validateForm.controls.name" nz-col [nzSm]="14" [nzXs]="24">
              <div class="p-pr" style="width:600px;">
                <input
                  formControlName="name"
                  placeholder="请输入商品名称"
                  maxlength="40"
                  class="ant-input ng-pristine ng-valid ng-touched"
                  style="width:600px;"/>
                <div style="position: absolute;right: 8px;bottom: 0px;color: #999;">
                  {{40-(validateForm.controls.name.value?validateForm.controls.name.value.length:0) }}
                </div>
              </div>
              <div nz-form-explain
                   *ngIf="validateForm.controls.name.dirty&&validateForm.controls.name.hasError('required')">请输入商品名称
              </div>
            </div>
          </div>
          <div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">商品编号：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <nz-input
                  formControlName="numbers"
                  [nzRows]="2"
                  [nzPlaceHolder]="'请输入商品编码'"
                  [nzSize]="'large'" style="width:180px;">
                </nz-input>
                <span class="ml-10">选填</span>
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品分类：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="14">
              <div>
                <nz-cascader
                  [nzChangeOnSelect]="true"
                  [nzOptions]="groupList"
                  formControlName="categories"
                  nzValueProperty="id"
                  nzLabelProperty="name"
                  nzAllowClear="false"
                  (ngModelChange)="cateChage($event)"
                  nzPlaceHolder="选择分类"
                  (nzChange)="cateChage($event)" style="width: 140px">
                </nz-cascader>
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品规格：</div>
            <div nz-col [nzSm]="14" [nzXs]="24">
              <div style="margin-top:5px">
                <nz-radio-group formControlName="spec">
                  <label nz-radio [nzValue]="1">
                    <span>无规格</span>
                  </label>
                  <label nz-radio [nzValue]="2">
                    <span>多规格</span>
                  </label>
                </nz-radio-group>
              </div>
              <div *ngIf="validateForm.controls.spec.value==2" style="margin-top:20px;">
                <nz-row >
                  <div nz-col [nzSpan]="3">
                  模板选择：
                  </div>
                  <div nz-col [nzSpan]="6">
                  <nz-select  formControlName="template">
                    <nz-option
                      *ngFor="let option of templateList"
                      [nzLabel]="option.name"
                      [nzValue]="option.id"
                    >
                    </nz-option>
                  </nz-select>
                  </div>
                </nz-row>

                <div class="spec-item" *ngFor="let item of specList;let i=index">
                  <div class="spec-head">
                    <label>规格名</label>
                    {{item.name}}
                  </div>
                  <div class="spec-content">
                    <div>
                      <label class="fl mt-5">规格值</label>
                      <div class="spec-value-list">
                        <div *ngIf="item.edit">
                          <div class="dis-inline p-pr" *ngFor="let item1 of item.attribute_values;let i1=index">
                            {{item1.name}}
                          </div>
                          <a (click)="addspec1(item)" style="display:inline-block; margin: 0 20px 20px 0;"><i
                            class="anticon anticon-plus"></i><span>添加规格值</span></a>
                        </div>
                        <div class="spec-list" *ngIf="!item.edit">
                          <nz-tag *ngFor="let item1 of item.attribute_values;let i1=index">
                            {{item1.name}}
                          </nz-tag>
                        </div>
                      </div>
                    </div>
                    <div>
                      <label class="fl mt-5" style="visibility:hidden">规格值</label>
                      <div class="spec-value-list">
                        <button *ngIf="item.edit " style="margin-bottom:5px;" nz-button
                                [nzType]="'primary'" (click)="bindGoodsCategory($event,item,i)"
                                [nzLoading]="item.loading">确定
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="has-error" *ngIf="specError">
                  <div nz-form-explain>请配置商品规格</div>
                </div>
                <!--<button nz-button [disabled]="specList.length>=3" [nzType]="'primary'"-->
                <!--[nzSize]="'large'" (click)="addspec($event)">-->
                <!--<i class="anticon anticon-plus"></i><span>新建规格</span>-->
                <!--</button>-->
                <div *ngIf="specArr.length>0">
                  <div style="border:1px solid #e9e9e9;margin-top:40px;">
                    <table class="spec-table ant-table ant-table-bordered ant-table-large" style="width:100%;">
                      <thead class="ant-table-thead">
                      <tr>
                        <ng-container *ngFor="let item of specList">
                          <ng-container>
                            <th>{{item.name}}</th>
                          </ng-container>
                        </ng-container>
                        <th class="ant-form-item-required">折扣价</th>
                        <th class="ant-form-item-required">原价</th>
                        <th class="ant-form-item-required">库存</th>
                        <th style="min-width:80px;" hidden>商品编号</th>
                      </tr>
                      </thead>
                      <tbody class="ant-table-tbody">
                      <tr *ngFor="let item1 of specArr;let i=index">
                        <ng-container *ngFor="let item of item1;let i1=index">
                          <td>
                            {{item.name}}
                          </td>
                        </ng-container>
                        <td
                          [class.has-error]="validateForm.controls['['+idsArr[i]+'][price_origin]'].dirty&& validateForm.controls['['+idsArr[i]+'][price_origin]'].hasError('specform') ">
                          <input class="ant-input ng-pristine ng-valid ng-touched"
                                 (input)="inputchange($event,'['+idsArr[i]+'][price_origin]')"
                                 [formControlName]="'['+idsArr[i]+'][price_origin]' "/></td>
                        <td
                          [class.has-error]="validateForm.controls['['+idsArr[i]+'][price_discount]'].dirty&& validateForm.controls['['+idsArr[i]+'][price_discount]'].hasError('specform') ">
                          <input class="ant-input ng-pristine ng-valid ng-touched"
                                 (input)="inputchange($event,'['+idsArr[i]+'][price_discount]')"
                                 [formControlName]="'['+idsArr[i]+'][price_discount]' "/></td>
                        <td
                          [class.has-error]="validateForm.controls['['+idsArr[i]+'][in_stock]'].dirty&& validateForm.controls['['+idsArr[i]+'][in_stock]'].hasError('specform') ">
                          <input class="ant-input ng-pristine ng-valid ng-touched"
                                 (input)="inputchange($event,'['+idsArr[i]+'][in_stock]','number')"
                                 [formControlName]="'['+idsArr[i]+'][in_stock]' "/></td>
                        <td hidden>
                          <nz-input [formControlName]="'['+idsArr[i]+'][isbn]' "></nz-input>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="has-error">
                    <div *ngIf="checkspecValue()" nz-form-explain>请输入规格对应的数据</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>商品原价：</div>
            <div nz-form-control nz-col
                 [class.has-error]="validateForm.controls.price_discount.dirty&&(validateForm.controls.price_origin.dirty&&(validateForm.controls.price_origin.hasError('required')||validateForm.controls.price_origin.hasError('pattern') ))"
                 [nzSm]="14" [nzXs]="24">
              <nz-input
                formControlName="price_origin"
                [nzRows]="2"
                [nzPlaceHolder]="'请输入商品原价'"
                [nzSize]="'large'" style="width:180px;">
                <ng-template #prefix>
                  <span>¥</span>
                </ng-template>
              </nz-input>
              <div nz-form-explain
                   *ngIf="validateForm.controls.price_origin.dirty&&validateForm.controls.price_origin.hasError('required')">
                请输入原价
              </div>
              <div nz-form-explain
                   *ngIf="validateForm.controls.price_origin.dirty&&validateForm.controls.price_origin.hasError('pattern')&&!validateForm.controls.price_origin.hasError('required')">
                请输入正确的原价
              </div>
              <div nz-form-explain
                   *ngIf="validateForm.controls.price_discount.dirty&&(validateForm.controls.price_discount.value>validateForm.controls.price_origin.value)&&!validateForm.controls.price_origin.hasError('required')&&!validateForm.controls.price_origin.hasError('pattern') ">
                原价要大于折扣售价
              </div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>折扣价：</div>
            <div nz-form-control
                 [class.has-error]="validateForm.controls.price_origin.dirty&&validateForm.controls.price_discount.hasError('required')||validateForm.controls.price_discount.hasError('pattern')"
                 nz-col [nzSm]="14" [nzXs]="24">
              <nz-input
                formControlName="price_discount"
                [nzRows]="2"
                [nzPlaceHolder]="'请输入折扣价'"
                [nzSize]="'large'" style="width:180px;">
                <ng-template #prefix>
                  <span>¥</span>
                </ng-template>
              </nz-input>
              <div nz-form-explain
                   *ngIf="validateForm.controls.price_discount.dirty&&validateForm.controls.price_discount.hasError('required')">
                请输入折扣价
              </div>
              <div nz-form-explain
                   *ngIf="validateForm.controls.price_discount.dirty&&validateForm.controls.price_discount.hasError('pattern')">
                请输入正确的折扣价
              </div>
            </div>
          </div>
          <div *ngIf="validateForm.controls.spec.value==1">
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>热销推荐：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
              <nz-radio-group formControlName="is_recommend">
                <label nz-radio [nzValue]="0">
                  <span>否</span>
                </label>
                <label nz-radio [nzValue]="1">
                  <span>是</span>
                </label>
              </nz-radio-group>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">商品描述</div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">商品主图：</div>
            <div nz-form-control [class.has-error]="picError" nz-col [nzSm]="14" [nzXs]="24">
              <div>图片支持格式 *.jpg 图片建议尺寸：640*640px，大小不超过500KB，图片最多上传4张！</div>
              <div style="margin-top:25px;">
                <uploadgroup
                  [(fileList)]="fileList"
                  (piclistChange)="fileChange($event)"
                  (fileListChange)="fileChange($event)"
                  (picDeleteChange)="picChange($event)"
                  [(piclist)]="picList"
                  [readonly]="readonly"
                  [edit]="editStatus"
                ></uploadgroup>
              </div>
              <div nz-form-explain *ngIf="picError">请至少上传一张图片</div>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">商品描述：</div>
            <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" style="z-index:1">
              <editor (onPostData)="PostData($event)"></editor>
            </div>
          </div>
        </div>
        <div class="content-item">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" class="item-title">上架设置</div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="6" [nzXs]="24" nz-form-item-required>上架时间：</div>
            <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
              <nz-radio-group formControlName="for_sale">
                <label nz-radio [nzValue]="1">
                  <span>立即上架</span>
                </label>
                <label nz-radio [nzValue]="0">
                  <span>暂不上架，放入我的商品中</span>
                </label>
              </nz-radio-group>
            </div>
          </div>
        </div>
        <div nz-form-item nz-row style="margin-top:20px;">
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24"></div>
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
            <button nz-button [nzType]="'primary'" [nzLoading]="!addStatus">完成</button>
          </div>
        </div>
      </form>
    </nz-spin>
  </div>
</div>
